// 响应式断点
$breakpoints: (
    xs: 480px,
    // 超小屏幕
    sm: 576px,
    // 小屏幕
    md: 768px,
    // 中等屏幕
    lg: 992px,
    // 大屏幕
    xl: 1200px,
    // 超大屏幕
    xxl: 1600px // 特大屏幕
);

// 响应式工具 - 小于指定断点
@mixin respond-to($breakpoint) {
    @if map-has-key($breakpoints, $breakpoint) {
        @media (max-width: map-get($breakpoints, $breakpoint)) {
            @content;
        }
    }

    @else {
        @media (max-width: $breakpoint) {
            @content;
        }
    }
}

// 响应式工具 - 大于指定断点
@mixin respond-from($breakpoint) {
    @if map-has-key($breakpoints, $breakpoint) {
        @media (min-width: map-get($breakpoints, $breakpoint)) {
            @content;
        }
    }

    @else {
        @media (min-width: $breakpoint) {
            @content;
        }
    }
}

// 文本溢出省略号
@mixin text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 多行文本溢出省略号
@mixin multi-line-ellipsis($lines: 2) {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
}

// 清除浮动
@mixin clearfix {
    &::after {
        display: block;
        clear: both;
        content: '';
    }
}

// 居中定位
@mixin center-position {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

// 禁止选择文本
@mixin no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

// 设置滚动条样式
@mixin custom-scrollbar($width: 6px, $track-color: #f1f1f1, $thumb-color: #888) {
    &::-webkit-scrollbar {
        width: $width;
    }

    &::-webkit-scrollbar-track {
        background: $track-color;
    }

    &::-webkit-scrollbar-thumb {
        background: $thumb-color;
        border-radius: $width / 2;
    }

    &::-webkit-scrollbar-thumb:hover {
        background: darken($thumb-color, 10%);
    }
}